<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_样式类名操作</title>
		<!-- 样式类名操作：针对css3、添加、移除、切换的元素"类名"操作
		     addClass()          有参：1个参和多个参
			                     语法：addclass("类名")
								 <p class="类名">
								 语法：addClass("类名1 类名2")；
								 <p class="类名1 类名2">
								 功能：匹配元素集合中的所有元素
								      添加一个或者多个类名操作
								 理解：元素添加存在的样式
			 removeClass()
			 toggleClass()
			 hasClass()
		 -->
		<!-- 要求:1.jq引入
		         2.html:    div  id="targetElement"
				            4个按钮    id="addClass"
							          id="removeClass"
							          id="toggleClass"
							          id="hasClass"
				            div  id="resultArea"
				 3.css:  .bgColor{  300*300  背景颜色随意}
				         .broders{  10个像素实线红色边框  倒角画圆}
		--> 
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.bgColor{
				width: 300px;
				height: 300px;
				background: #f00;
			}
			.borders{
				border: 10px soild #ff0;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div id="targetElement"></div>
		<button id="addClassBtn">添加类名</button>
		<button id="removeClassBtn">移除类名</button>
		<button id="toggleClassBtn">切换类名</button>
		<button id="hasClassBtn">检查类名是否存在</button>
		<div id="resultArea"></div>
		<script>
			//1.点击  添加类名 按钮  添加效果【样式】 300*300 背景色红色
			$("#addClassBtn").click(function(){
				//div添加样式-- 存在样式：类名
				$("#targetElement").addClass("bgColor");
				$("#resultArea").html("<h4>添加样式类名:bgcoor</h4>")
			});
			
		</script>
	</body>
</html>